<template>
  <view class="mxp-toolbar" :class="cusClass" :style="[cusStyle, { height }]" @touchmove.stop.passive="() => {}">
    <view
      v-if="(interchange && showCancel) || (!interchange && showConfirm)"
      class="buttoon-box"
      :style="{ height }"
      style="position: absolute; left: 5px; z-index: 2"
      hoverClass="hover-class"
      :hoverStartTime="0"
      :hoverStayTime="0"
      @click="handleClick('left')"
    >
      <mxp-icon v-if="interchange && showCancelIcon" name="guanbi" :color="cancelColor" size="16px"></mxp-icon>
      <text v-else key="text-2" class="text" :style="{ color: interchange ? cancelColor : confirmColor }">
        {{ interchange ? cancelText : confirmText }}
      </text>
    </view>
    <view class="title-box" :style="{ height, width: titleWidth }">
      <text v-if="title" class="ellipsis title">
        {{ title }}
      </text>
    </view>
    <view
      v-if="(interchange && showConfirm) || (!interchange && showCancel)"
      key="view-2"
      class="buttoon-box"
      :style="{ height }"
      style="position: absolute; right: 5px; z-index: 2"
      hoverClass="hover-class"
      :hoverStartTime="0"
      :hoverStayTime="0"
      @click="handleClick('right')"
    >
      <mxp-icon v-if="!interchange && showCancelIcon" name="guanbi" :color="cancelColor" size="16px" :style="{ pointerEvents: 'none' }"></mxp-icon>
      <text v-else key="text-1" class="text" :style="{ color: interchange ? confirmColor : cancelColor }">
        {{ interchange ? confirmText : cancelText }}
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import type { CSSProperties } from 'vue';
  import type { $AllColorStr, $AllSizeUnitStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  export type $ToolbarProps = {
    /** 标题文字 */
    title?: string;
    /** 高度 */
    height?: $SizeUnitStr;
    /** 标题的宽度 （防止左右两边按钮被遮挡） */
    titleWidth?: $AllSizeUnitStr;
    /** 调换确定和取消的位置 */
    interchange?: boolean;
    /** 使图标代替cancelText文字 */
    showCancelIcon?: boolean;
    /** 取消按钮的文字 */
    cancelText?: string;
    /** 确认按钮的文字 */
    confirmText?: string;
    /** 取消按钮的颜色 */
    cancelColor?: $AllColorStr;
    /** 确认按钮的颜色 */
    confirmColor?: $AllColorStr;
    /** 是否显示确定按钮 */
    showConfirm?: boolean;
    /** 是否显示取消按钮 */
    showCancel?: boolean;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };

  defineOptions({
    name: 'mxp-toolbar',
  });

  const props = withDefaults(defineProps<$ToolbarProps>(), {
    title: '',
    titleWidth: '100%',
    interchange: false,
    height: '60px',
    cancelText: '取消',
    confirmText: '确认',
    showCancelIcon: true,
    cancelColor: '#666666',
    confirmColor: '#3c9cff',
    showConfirm: true,
    showCancel: true,
    cusStyle: () => ({}),
    cusClass: '',
  });

  const emits = defineEmits<{
    (e: 'cancel'): void;
    (e: 'confirm'): void;
  }>();

  /** 点击按钮 */
  function handleClick(type: 'left' | 'right') {
    if (type === 'left') {
      props.interchange ? emits('cancel') : emits('confirm');
    } else {
      props.interchange ? emits('confirm') : emits('cancel');
    }
  }
</script>

<style lang="scss" scoped>
  .mxp-toolbar {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 60px;

    .buttoon-box {
      top: 0;
      bottom: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 10px;

      .text {
        font-size: 14px;
        line-height: 14px;
      }
    }

    .title-box {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      .title {
        flex: 1;
        padding: 0 30px;
        font-size: 16px;
        color: #333333;
        text-align: center;

        &.ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
